@keyframes ofBannerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--of-scroll)); }
}

body {
  margin: 0;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url('../image/bag/main3.jpg');
  background-size: cover;
  background-position: center;
}

/* ── OUTER PHONE FRAME ── */
.phoneFrame {
  position: relative;
  width: 420px;
  height: 820px;
  background: linear-gradient(160deg, #2a2a2a, #111111);
  border-radius: 52px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 2px 4px rgba(255,255,255,0.04),
    0 0 0 1px #000,
    0 40px 100px rgba(0,0,0,0.8),
    0 10px 30px rgba(0,0,0,0.5);
  padding: 18px 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VOLUME UP */
.phoneFrame::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 140px;
  width: 4px;
  height: 34px;
  background: linear-gradient(to right, #1a1a1a, #2a2a2a);
  border-radius: 3px 0 0 3px;
  box-shadow: 0 42px 0 #1a1a1a;
}

/* POWER BUTTON */
.phoneFrame::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 170px;
  width: 4px;
  height: 55px;
  background: linear-gradient(to left, #1a1a1a, #2a2a2a);
  border-radius: 0 3px 3px 0;
}

/* ── PHONE SCREEN ── */
.phone-case {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: url('../image/bag/gfbag.jpg') center/cover no-repeat;
  position: relative;
  box-sizing: border-box;
}

.phone {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
}

/* ── MOBILE — full screen ──
   Purely width-based: shrinking the browser window down to phone
   size, whether on a real phone or by resizing a desktop window,
   collapses the phone case into a true edge-to-edge fullscreen
   layout — same as it always has. js/device-overlay.js watches this
   same width breakpoint separately to decide whether the dialogue
   overlay renders inside the (now fullscreen) phone, or outside it
   as the desktop bottom bar. */
@media screen and (max-width: 500px) {
  body {
    background: none !important;
    background-color: #000 !important;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .phoneFrame {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }

  .phoneFrame::before,
  .phoneFrame::after {
    display: none !important;
  }

  .phone-case {
    border-radius: 0 !important;
  }
}
/* ── MOBILE ── */
@media screen and (max-width: 500px) {

  body {
    background: none !important;
    background-color: #000 !important;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .phone-case {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }

}



/* SAVE BUTTON */

#home {
  padding-top:0;
  padding-bottom:80px;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  box-sizing:border-box;
  background:#111218;
}

/* ═══ iOS-STYLE HOME WIDGET (single card) ═══ */
#homeDayBadge {
  position: absolute;
  top: 58px;
  left: 12px;
  z-index: 100;
  pointer-events: none;
  width: 160px;
}

/* single card */
.hwCard {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

/* LEFT section — time + date */
.hwLeft {
  flex: 1.5;
  padding: 7px 8px 7px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* vertical divider */
.hwDivider {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* RIGHT section — day number */
.hwRight {
  flex: 1;
  padding: 7px 8px 7px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Phase icon */
.hwIcon {
  font-size: 12px;
  line-height: 1;
  margin-bottom: 2px;
}

/* Time display — "8:00 AM" */
.hwTime {
  font-size: 15px;
  font-weight: 700;
  color: #FFB800;
  line-height: 1;
  letter-spacing: -0.3px;
  font-family: -apple-system, 'SF Pro Display', Arial, sans-serif;
}

/* Date line — "Jul 1 · Monday" */
.hwDateLine {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  letter-spacing: 0.2px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
}

/* Month label in right section */
.hwMonth {
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.38);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
  margin-bottom: 1px;
}

/* Big day number in right section */
.hwBigNum {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #00AFEC;
  font-family: -apple-system, 'SF Pro Display', Arial, sans-serif;
  letter-spacing: -0.5px;
}

/* Day abbreviation in right section */
.hwDayName {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
}

.app-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  overflow: hidden;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

#app {
  display:none;
  height:100%;
  position:relative;
  z-index:50;
}

#home {
  display:none;
  padding-top:0;
  height:100%;
  overflow-y:auto;
  background:#111218;
}

.contact {
  display:flex;
  align-items:center;
  padding:10px 16px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.045);
  transition:background 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.contact:active { background:rgba(255,255,255,0.05); }

.contact-box {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
}

.contact-box img {
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

/* CHAT */
.chat {
  display:none;
  flex-direction:column;
  height:100%;
}

.top {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:rgba(10,10,22,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}

.top img {
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

.backBtn {
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  color:white;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.backBtn:active { opacity:0.55; }

.messages {
  flex:1;
  overflow-y:auto;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:rgba(6,6,16,0.45);
  scrollbar-width:none;
}
.messages::-webkit-scrollbar { display:none; }

.msgRow {
  display:flex;
  align-items:flex-end;
  gap:7px;
  padding:1px 2px;
}

.left  { justify-content:flex-start; }
.right { justify-content:flex-end;   }

.msg {
  padding:10px 14px;
  border-radius:18px;
  max-width:72%;
  font-size:14px;
  line-height:1.45;
  word-break:break-word;
  font-family:Arial;
}

.me {
  background:#e63950;
  color:white;
  border-bottom-right-radius:5px;
  box-shadow:0 2px 10px rgba(230,57,80,0.3);
}
.them {
  background:#1e1e2e;
  color:rgba(255,255,255,0.92);
  border-bottom-left-radius:5px;
  border:1px solid rgba(255,255,255,0.05);
}

.avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

.input-bar {
  display:flex;
  align-items:center;
  padding:10px 12px;
  gap:8px;
  background:rgba(10,10,22,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}

.input-bar input {
  flex:1;
  padding:11px 16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.06);
  color:white;
  font-size:14px;
  font-family:Arial;
  outline:none;
}
.input-bar input::placeholder { color:rgba(255,255,255,0.3); }

.input-bar button {
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#e63950;
  color:white;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px rgba(230,57,80,0.45);
  transition:transform 0.12s;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.input-bar button:active { transform:scale(0.9); }

/* APP GRID — wraps to 2 rows if 4 icons */
.app-grid {
  position:absolute;
  bottom:30px;
  width:100%;
  display:flex;
  flex-wrap:wrap-reverse;
  justify-content:flex-start;
  gap:20px;
  padding:0 16px;
  box-sizing:border-box;
}

/* SAVE */


.slot {
  border:1px solid white;
  margin:10px;
  padding:10px;
  color:white;
}

/* ===================== GALLERY — UPGRADED ===================== */

#galleryMenu {
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:#0d0d0d;
  z-index:99999;
  overflow:hidden;
  flex-direction:column;
}

#galleryTopBar {
  display:flex;
  align-items:center;
  padding:12px 14px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  gap:10px;
  flex-shrink:0;
}

#galleryTopBar .galBackBtn {
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:white;
  font-size:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

#galleryTopBar h3 {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:white;
  flex:1;
}

#galleryCount {
  font-size:12px;
  color:rgba(255,255,255,0.5);
}

#galleryScroll {
  flex:1;
  overflow-y:auto;
  padding:10px;
  scrollbar-width:none;
}
#galleryScroll::-webkit-scrollbar { display:none; }

#galleryBox {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.galThumb {
  aspect-ratio:1/1;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:#1a1a1a;
}

.galThumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.2s;
}

.galThumb:active img { transform:scale(0.95); }

#galleryEmpty {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:300px;
  color:rgba(255,255,255,0.3);
  font-size:14px;
  gap:10px;
}
#galleryEmpty span { font-size:40px; }

#galPreview {
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.95);
  z-index:100000;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#galPreviewClose {
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:white;
  font-size:18px;
  cursor:pointer;
}

#galPreviewImg {
  max-width:92%;
  max-height:72%;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.8);
}

#galSetBgBtn {
  margin-top:18px;
  padding:13px 30px;
  border:none;
  border-radius:24px;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(255,77,109,0.45);
  transition:transform 0.15s, box-shadow 0.15s;
  letter-spacing:0.5px;
}
#galSetBgBtn:active {
  transform:scale(0.96);
  box-shadow:0 2px 8px rgba(255,77,109,0.3);
}

#galToast {
  position:absolute;
  bottom:70px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(255,77,109,0.92);
  color:white;
  padding:9px 20px;
  border-radius:20px;
  font-size:13px;
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
  white-space:nowrap;
  pointer-events:none;
}
#galToast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── THIK G ── */
#reelContainer::-webkit-scrollbar { display:none; }
#tgHomeView::-webkit-scrollbar    { display:none; }
#tgReelsView::-webkit-scrollbar   { display:none; }

.tgPost {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
}

.tgPostHeader {
  display:flex; align-items:center;
  gap:10px; padding:10px 12px;
  cursor:pointer;
}

.tgPostHeader img {
  width:38px; height:38px;
  border-radius:50%; object-fit:cover;
  border:1.5px solid #ff4d6d;
  flex-shrink:0;
}

.tgPostMedia img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.tgPostMedia video {
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

.tgPostActions {
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,0.06);
}

.tgActionBtn {
  display:flex; align-items:center;
  gap:5px; padding:6px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; cursor:pointer;
  color:rgba(255,255,255,0.7);
  font-size:12px; font-weight:600;
  transition:background 0.2s;
  font-family:Arial;
}

.tgActionBtn:active {
  background:rgba(255,255,255,0.12);
}

.tgActionBtn.liked {
  background:rgba(255,77,109,0.2);
  border-color:rgba(255,77,109,0.4);
  color:#ff4d6d;
}

.tgPostCaption {
  padding:8px 12px 12px;
  color:rgba(255,255,255,0.7);
  font-size:13px; line-height:1.6;
}

/* REEL SLIDE */
.reelSlide {
  width:100%;
  height:100%;
  scroll-snap-align:start;
  position:relative;
  background:#000;
  overflow:hidden;
  flex-shrink:0;
  min-height:100%;
}

.reelSlide video {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

.reelBottomFade {
  position:absolute;
  bottom:0; left:0; width:100%;
  height:50%;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  pointer-events:none; z-index:3;
}

.reelTopFade {
  position:absolute;
  top:0; left:0; width:100%;
  height:30%;
  background:linear-gradient(to bottom,rgba(0,0,0,0.5),transparent);
  pointer-events:none; z-index:3;
}

.reelProfileOverlay {
  position:absolute;
  bottom:80px; left:12px;
  display:flex; align-items:center;
  gap:10px; z-index:5; cursor:pointer;
  max-width:65%;
}

.reelProfileOverlay img {
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid white;
  object-fit:cover; flex-shrink:0;
}

.reelProfileName {
  color:white; font-size:14px;
  font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
}

.reelProfileBio {
  color:rgba(255,255,255,0.7);
  font-size:11px; margin-top:2px;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}

.reelActions {
  position:absolute;
  right:10px; bottom:80px;
  display:flex; flex-direction:column;
  align-items:center; gap:4px; z-index:5;
}

.reelActionBtn {
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  background:none; border:none;
  cursor:pointer; padding:6px;
}

.reelActionIcon {
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.2);
  display:flex; align-items:center;
  justify-content:center; font-size:20px;
  transition:transform 0.15s, background 0.2s;
}

.reelActionBtn:active .reelActionIcon {
  transform:scale(0.86);
}

.reelActionBtn.liked .reelActionIcon {
  background:rgba(255,77,109,0.4);
  border-color:#ff4d6d;
}

.reelActionLabel {
  color:white; font-size:11px;
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}

/* PROFILE GRID */
.tgImgThumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
}

.tgImgThumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 0.2s;
}

.tgImgThumb:active img { transform:scale(0.95); }

/* PROFILE BUBBLE */
.tgProfileBubble {
  display:flex; flex-direction:column;
  align-items:center; gap:5px;
  cursor:pointer; flex-shrink:0;
  min-width:65px; max-width:65px;
}

.tgProfileBubble img {
  width:58px; height:58px;
  border-radius:50%; object-fit:cover;
  border:2px solid #ff4d6d;
}

.tgProfileBubble span {
  color:rgba(255,255,255,0.7);
  font-size:10px; text-align:center;
  max-width:60px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}



/* ===================== DAY MENU ===================== */

#dayMenu {
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.93);
  z-index:99999;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}

/* month label above the big number */
#dayMenuMonthEl {
  font-size:15px;
  font-weight:800;
  letter-spacing:7px;
  color:rgba(255,255,255,0.38);
  text-transform:uppercase;
  margin-bottom:-6px;
  font-family:-apple-system,'SF Pro Display',Arial,sans-serif;
}

/* big day number */
#dayMenuNumber {
  font-size:100px;
  font-weight:900;
  line-height:1;
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-family:-apple-system,'SF Pro Display',Arial,sans-serif;
}

#dayMenuLabel {
  font-size:12px;
  color:rgba(255,255,255,0.5);
  letter-spacing:4px;
  text-transform:uppercase;
  margin-top:4px;
  margin-bottom:36px;
  font-family:-apple-system,'SF Pro Text',Arial,sans-serif;
}

/* what's in this day */
#dayMenuChars {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  max-width:300px;
  margin-bottom:36px;
}

.dayCharPill {
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;
  padding:5px 12px;
  font-size:12px;
  color:white;
}

/* advance button */
#dayAdvanceBtn {
  padding:16px 36px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  color:white;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 24px rgba(0,175,236,0.4);
  transition:transform 0.15s;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-family:-apple-system,'SF Pro Text',Arial,sans-serif;
}
#dayAdvanceBtn:active { transform:scale(0.96); }
#dayAdvanceBtn:disabled {
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);
  box-shadow:none;
  cursor:default;
  letter-spacing:0.5px;
  text-transform:none;
}

#dayMaxNote {
  margin-top:12px;
  font-size:12px;
  color:rgba(255,255,255,0.3);
}

/* day advance toast */
#dayToast {
  position:absolute;
  bottom:80px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  color:white;
  padding:10px 22px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
  white-space:nowrap;
  pointer-events:none;
  z-index:999999;
}
#dayToast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Profile tab active state */
.profTab { transition: color 0.2s, border-color 0.2s; }

/* Profile image grid items */
.profImgThumb {
  aspect-ratio:9/16;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
}
.profImgThumb img {
  width:100%; height:100%; object-fit:cover;
  display:block; transition:transform 0.2s;
}
.profImgThumb:active img { transform:scale(0.95); }

/* Private card */
.privateCard {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.privateBlur {
  filter:blur(14px);
  pointer-events:none;
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}
.unlockBtn {
  width:100%; padding:14px;
  border:none; cursor:pointer;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white; font-size:14px; font-weight:700;
  letter-spacing:0.5px;
}
.unlockBtn:disabled {
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);
  cursor:default;
}


#dayMenuClose {
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:white;
  font-size:18px;
  cursor:pointer;
}



/* ── REEL ACTION BAR ── */
.reelActions {
  position: absolute;
  right: 0;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 5;
  padding: 8px 10px;
}

.reelActionBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
}

.reelActionIcon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.15s, background 0.2s;
  border: 1.5px solid rgba(255,255,255,0.2);
}

.reelActionBtn:active .reelActionIcon {
  transform: scale(0.88);
}

.reelActionBtn.liked .reelActionIcon {
  background: rgba(255,77,109,0.45);
  border-color: #ff4d6d;
}

.reelActionLabel {
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}


/* INTRO FADE TRANSITIONS */
#introVideo, #introImage, #introText, #introTapHint {
  transition: opacity 0.6s ease;
}

.intro-fade-out { opacity: 0 !important; }
.intro-fade-in  { opacity: 1 !important; }

@keyframes introTextIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0);    }
}

#introTextInner {
  animation: introTextIn 0.5s ease forwards;
  background: rgba(0,0,0,0.55);
  padding: 12px 16px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.7;
}

/* ── ONLYFRIENDS REDESIGN ── */

/* POST CARD */
.ofPostCard {
  background:#141418;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  overflow:hidden;
}

.ofPostCard img,
.ofPostCard video {
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

.ofPostCaption {
  padding:10px 14px 12px;
  color:rgba(255,255,255,0.7);
  font-size:13px;
  line-height:1.6;
}

.ofPostHeader {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
}

.ofPostHeader img {
  width:36px !important;
  height:36px !important;
  aspect-ratio:1/1 !important;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid #00AFEC;
}

/* CREATOR CARD (home row) */
.ofCreatorCard {
  position:relative;
  width:118px;
  height:168px;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  background:#141418;
}

.ofCreatorCardBg {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ofCreatorCardGrad {
  position:absolute;
  bottom:0; left:0; right:0;
  height:65%;
  background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.3) 60%,transparent 100%);
  pointer-events:none;
}

.ofCreatorCardInfo {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:8px 8px 10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.ofCreatorCardAvatar {
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
  border:1.5px solid rgba(255,255,255,0.8);
  flex-shrink:0;
}

.ofCreatorCardName {
  color:white;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ofCreatorCardSub {
  color:rgba(255,255,255,0.5);
  font-size:9px;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* MEMORY CARDS (character grid + per-character event grid) —
   same visual language as .ofCreatorCard, laid out 2-per-row instead
   of a horizontal scroll row. */
.memCardGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.memCard {
  position:relative;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  background:#141418;
  -webkit-tap-highlight-color:transparent;
}

.memCardBg {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.memCardGrad {
  position:absolute;
  bottom:0; left:0; right:0;
  height:55%;
  background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.3) 60%,transparent 100%);
  pointer-events:none;
}

.memCardLabel {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:10px 12px 12px;
  color:white;
  font-size:13px;
  font-weight:700;
  font-family:Arial;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* LOCKED CONTENT */
.ofLockedBox {
  position:relative;
  aspect-ratio:9/16;
  background:#0E0E14;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
}

.ofLockedBox img {
  width:100% !important;
  height:100% !important;
  aspect-ratio:9/16 !important;
  object-fit:cover;
  filter:blur(18px);
  position:absolute;
  top:0; left:0;
}

.ofLockIcon {
  font-size:30px;
  z-index:2;
}

/* SUBSCRIBE BUTTON */
.ofSubBtn {
  width:100%;
  padding:13px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#00AFEC,#0070C9);
  color:white;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  letter-spacing:0.2px;
  box-shadow:0 4px 18px rgba(0,175,236,0.28);
}

.ofSubBtn:disabled {
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.25);
  cursor:default;
  box-shadow:none;
}

/* GRID THUMBNAIL */
.ofGridThumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#141418;
  cursor:pointer;
  position:relative;
}

.ofGridThumb img,
.ofGridThumb video {
  width:100% !important;
  height:100% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover;
  display:block;
}

.ofGridLock {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:18px;
  background:rgba(0,0,0,0.6);
  width:36px; height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}

/* SAVE SLOT CARD */
.saveSlot {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.saveSlot.hasData {
  border-color:rgba(255,77,109,0.3);
  background:rgba(255,77,109,0.05);
}

.saveSlotIcon {
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center;
  justify-content:center;
  font-size:20px; flex-shrink:0;
}

.saveSlotInfo {
  flex:1;
}

.saveSlotTitle {
  color:white;
  font-size:13px;
  font-weight:700;
}

.saveSlotSub {
  color:rgba(255,255,255,0.35);
  font-size:11px;
  margin-top:3px;
}

.saveSlotBtns {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.saveBtnSave {
  padding:7px 12px;
  border:none; border-radius:8px;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white; font-size:11px;
  font-weight:700; cursor:pointer;
  white-space:nowrap;
}

.saveBtnLoad {
  padding:7px 12px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  color:white; font-size:11px;
  font-weight:700; cursor:pointer;
  white-space:nowrap;
}

.saveBtnLoad:disabled {
  opacity:0.3; cursor:default;
}

.saveBtnDelete {
  padding:7px 12px;
  border:1px solid rgba(255,77,77,0.3);
  border-radius:8px;
  background:rgba(255,77,77,0.08);
  color:#ff6b6b; font-size:11px;
  font-weight:700; cursor:pointer;
  white-space:nowrap;
}

.saveBtnDelete:disabled {
  opacity:0.3; cursor:default;
}

/* NOTES APP */
.noteCard {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  transition:background 0.2s;
  display:flex;
  align-items:center;
  gap:12px;
}

.noteCard:active {
  background:rgba(255,255,255,0.08);
}

.noteCardIcon {
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}

.noteCardInfo { flex:1; }

.noteCardTitle {
  color:white;
  font-size:14px;
  font-weight:700;
}

.noteCardPreview {
  color:rgba(255,255,255,0.4);
  font-size:12px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

.noteCardArrow {
  color:rgba(255,255,255,0.3);
  font-size:18px;
}

/* CATEGORY PILL */
.noteCatPill {
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.6);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:all 0.2s;
}

.noteCatPill.active {
  background:rgba(255,77,109,0.25);
  border-color:rgba(255,77,109,0.6);
  color:#ff4d6d;
}

/* NOTE DETAIL SECTIONS */
.noteSection {
  margin-bottom:20px;
}

.noteSectionTitle {
  color:#ff4d6d;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,77,109,0.2);
}

.noteSectionBody {
  color:rgba(255,255,255,0.75);
  font-size:13px;
  line-height:1.8;
}

.noteTip {
  background:rgba(255,77,109,0.08);
  border:1px solid rgba(255,77,109,0.2);
  border-radius:10px;
  padding:10px 12px;
  color:rgba(255,255,255,0.7);
  font-size:12px;
  line-height:1.7;
  margin-top:8px;
}

.noteHighlight {
  background:rgba(255,200,0,0.1);
  border:1px solid rgba(255,200,0,0.2);
  border-radius:10px;
  padding:10px 12px;
  color:#f9c74f;
  font-size:12px;
  line-height:1.7;
  margin-top:8px;
}

/* NOTE IMAGES */
.noteHeroImg {
  width:100%;
  border-radius:14px;
  object-fit:cover;
  display:block;
  margin-bottom:20px;
  max-height:200px;
  border:1px solid rgba(255,255,255,0.08);
}

.noteSectionImg {
  width:100%;
  border-radius:10px;
  object-fit:cover;
  display:block;
  margin:8px 0 12px;
  border:1px solid rgba(255,255,255,0.07);
}

/* SEARCH HIGHLIGHT */
.searchMatch { color:white; }


/* Prevent mobile bounce scroll */
html, body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

/* Fix touch scrolling inside app */
.messages,
#home,
#galleryScroll,
#reelContainer,
#ofHome,
#notesList,
#slots,
#hackHome {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ── THIK G ── */
#reelContainer::-webkit-scrollbar { display:none; }
#tgHomeView::-webkit-scrollbar    { display:none; }
#tgReelsView::-webkit-scrollbar   { display:none; }

.tgPost {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
}

.tgPostHeader {
  display:flex; align-items:center;
  gap:10px; padding:10px 12px;
  cursor:pointer;
}

.tgPostHeader img {
  width:38px; height:38px;
  border-radius:50%; object-fit:cover;
  border:1.5px solid #ff4d6d;
  flex-shrink:0;
}

.tgPostMedia img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.tgPostMedia video {
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  display:block;
}

.tgPostActions {
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,0.06);
}

.tgActionBtn {
  display:flex; align-items:center;
  gap:5px; padding:6px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; cursor:pointer;
  color:rgba(255,255,255,0.7);
  font-size:12px; font-weight:600;
  transition:background 0.2s;
  font-family:Arial;
}

.tgActionBtn:active {
  background:rgba(255,255,255,0.12);
}

.tgActionBtn.liked {
  background:rgba(255,77,109,0.2);
  border-color:rgba(255,77,109,0.4);
  color:#ff4d6d;
}

.tgPostCaption {
  padding:8px 12px 12px;
  color:rgba(255,255,255,0.7);
  font-size:13px; line-height:1.6;
}

/* REEL SLIDE */
.reelSlide {
  width:100%;
  height:100%;
  scroll-snap-align:start;
  position:relative;
  background:#000;
  overflow:hidden;
  flex-shrink:0;
  min-height:100%;
}

.reelSlide video {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  top:0; left:0;
}

.reelBottomFade {
  position:absolute;
  bottom:0; left:0; width:100%;
  height:50%;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  pointer-events:none; z-index:3;
}

.reelTopFade {
  position:absolute;
  top:0; left:0; width:100%;
  height:30%;
  background:linear-gradient(to bottom,rgba(0,0,0,0.5),transparent);
  pointer-events:none; z-index:3;
}

.reelProfileOverlay {
  position:absolute;
  bottom:80px; left:12px;
  display:flex; align-items:center;
  gap:10px; z-index:5; cursor:pointer;
  max-width:65%;
}

.reelProfileOverlay img {
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid white;
  object-fit:cover; flex-shrink:0;
}

.reelProfileName {
  color:white; font-size:14px;
  font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
}

.reelProfileBio {
  color:rgba(255,255,255,0.7);
  font-size:11px; margin-top:2px;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}

.reelActions {
  position:absolute;
  right:10px; bottom:80px;
  display:flex; flex-direction:column;
  align-items:center; gap:4px; z-index:5;
}

.reelActionBtn {
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  background:none; border:none;
  cursor:pointer; padding:6px;
}

.reelActionIcon {
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.2);
  display:flex; align-items:center;
  justify-content:center; font-size:20px;
  transition:transform 0.15s, background 0.2s;
}

.reelActionBtn:active .reelActionIcon {
  transform:scale(0.86);
}

.reelActionBtn.liked .reelActionIcon {
  background:rgba(255,77,109,0.4);
  border-color:#ff4d6d;
}

.reelActionLabel {
  color:white; font-size:11px;
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}

/* PROFILE GRID */
.tgImgThumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#1a1a1a;
  cursor:pointer;
}

.tgImgThumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 0.2s;
}

.tgImgThumb:active img { transform:scale(0.95); }

/* PROFILE BUBBLE */
.tgProfileBubble {
  display:flex; flex-direction:column;
  align-items:center; gap:5px;
  cursor:pointer; flex-shrink:0;
  min-width:65px; max-width:65px;
}

.tgProfileBubble img {
  width:58px; height:58px;
  border-radius:50%; object-fit:cover;
  border:2px solid #ff4d6d;
}

.tgProfileBubble span {
  color:rgba(255,255,255,0.7);
  font-size:10px; text-align:center;
  max-width:60px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}


/* ═══ CALL APP — PREMIUM UI ═══ */
@keyframes callPulse {
  0%   { transform:scale(1);   opacity:0.6; }
  100% { transform:scale(1.8); opacity:0;   }
}

/* avatar wrapper */
.crAvatarWrap {
  position: relative;
  width: 108px; height: 108px;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* pulse rings */
.crPulse {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  transform: translate(-50%,-50%);
}
.crPulse1 {
  width: 140px; height: 140px;
  animation: crRingPulse 2.2s ease-in-out infinite;
}
.crPulse2 {
  width: 170px; height: 170px;
  animation: crRingPulse 2.2s ease-in-out 0.6s infinite;
}
@keyframes crRingPulse {
  0%,100% { opacity:0.3; transform:translate(-50%,-50%) scale(0.96); }
  50%     { opacity:0.08; transform:translate(-50%,-50%) scale(1.03); }
}

/* avatar image */
.crAvatar {
  width: 108px; height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.25);
  position: relative; z-index: 2;
  display: block;
}

/* contact name */
.crName {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 14px;
  font-family: -apple-system, 'SF Pro Display', Arial, sans-serif;
  text-align: center;
  letter-spacing: 0.2px;
}

/* status row */
.crStatusRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* animated signal bars */
.crBars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}
.crBars span {
  width: 3px;
  background: #4ade80;
  border-radius: 2px;
  animation: crBarAnim 1.1s ease-in-out infinite;
}
.crBars span:nth-child(1) { height: 5px;  animation-delay: 0s;    }
.crBars span:nth-child(2) { height: 9px;  animation-delay: 0.15s; }
.crBars span:nth-child(3) { height: 13px; animation-delay: 0.3s;  }
.crBars span:nth-child(4) { height: 9px;  animation-delay: 0.45s; }
@keyframes crBarAnim {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}

/* status text */
.crStatusText {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
  letter-spacing: 0.3px;
}

/* subtle label above controls */
.crSubLabel {
  color: rgba(255,255,255,0.25);
  font-size: 11px;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
  font-family: -apple-system, Arial, sans-serif;
}

/* 3x2 controls grid */
.crControls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  margin-bottom: 28px;
}

.crBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: default;
}

.crBtnIcon {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.crBtnLabel {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-family: -apple-system, 'SF Pro Text', Arial, sans-serif;
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════
   GROUP CHAT  — uses the same #chat screen as private chats;
   only the typing indicator and animation need their own styles
═══════════════════════════════════════ */

/* TYPING INDICATOR — sits inside a .msg.them bubble */
.gc-typing {
  display:inline-flex; align-items:center; gap:5px;
}
.gc-typing span {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.4);
  display:inline-block;
  animation:gcDotBounce 1.3s infinite ease-in-out;
}
.gc-typing span:nth-child(2){ animation-delay:0.2s; }
.gc-typing span:nth-child(3){ animation-delay:0.4s; }

@keyframes gcDotBounce {
  0%,60%,100%{ transform:translateY(0);   opacity:0.4; }
  30%         { transform:translateY(-6px);opacity:1;   }
}

/* Fade-in for new messages */
.gc-anim {
  animation:gcSlideIn 0.22s ease forwards;
}
@keyframes gcSlideIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

/* end call button */
.crEndBtn {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #e53935;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(229,57,53,0.55);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.crEndBtn:active { transform: scale(0.93); }

.callContactRow {
  display:flex; align-items:center;
  gap:13px;
  padding:11px 14px;
  cursor:pointer;
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  transition:background 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.callContactRow:active {
  background:rgba(255,255,255,0.09);
}
.callContactRowDivider {
  border-bottom:none;
}
.callPhoneBtn {
  width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform 0.1s, opacity 0.1s;
}
.callPhoneBtn:active {
  transform:scale(0.9);
}

.callOptionBtn {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:16px 14px;
  display:flex; align-items:center;
  gap:12px; cursor:pointer;
  color:white; font-size:14px;
  font-weight:600; font-family:Arial;
  transition:background 0.2s;
  width:100%; text-align:left;
}

.callOptionBtn:active {
  background:rgba(255,255,255,0.1);
}

.callOptionIcon {
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(255,77,109,0.15);
  border:1px solid rgba(255,77,109,0.3);
  display:flex; align-items:center;
  justify-content:center; font-size:22px;
  flex-shrink:0;
}

.callActivityBtn {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:14px;
  color:white; font-size:13px;
  font-weight:600; font-family:Arial;
  cursor:pointer; width:100%;
  text-align:left;
  transition:background 0.2s;
}

.callActivityBtn:active {
  background:rgba(255,255,255,0.1);
}


#globalViewer {
  border-radius: 38px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Mobile — no border radius */
@media screen and (max-width: 500px) {
  #globalViewer {
    border-radius: 0 !important;
  }
}
/* Disable video fullscreen everywhere */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

video::-webkit-media-controls-overflow-button {
  display: none !important;
}

video::-webkit-media-controls-panel {
  overflow: hidden;
}

video {
  max-width: 100%;
}
#dayEventVideo,
#introVideo,
#callBgVideo,
#callEvtVideo {
  transition: opacity 0.2s ease;
}


/* ── MAP APP ── */
@keyframes mapPinPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,77,109,0.7); }
  70%  { box-shadow:0 0 0 8px rgba(255,77,109,0); }
  100% { box-shadow:0 0 0 0 rgba(255,77,109,0); }
}

@keyframes mapDotPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%     { transform:scale(1.5); opacity:0.6; }
}

.mapPin {
  position:absolute;
  transform:translate(-50%,-100%);
  display:flex; flex-direction:column;
  align-items:center; gap:0;
  cursor:pointer; z-index:5;
}

.mapPinCircle {
  width:40px; height:40px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.25);
  transition:transform 0.2s;
}

.mapPinCircle.hasEvent {
  border-color:#ff4d6d;
  animation:mapPinPulse 1.8s infinite;
}

.mapPinCircle img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.mapPinTip {
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:8px solid rgba(255,255,255,0.25);
  margin-top:-1px;
}

.mapPinTip.hasEvent {
  border-top-color:#ff4d6d;
}

.mapPinLabel {
  background:rgba(0,0,0,0.82);
  color:rgba(255,255,255,0.8);
  font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:8px;
  white-space:nowrap; margin-top:3px;
  letter-spacing:0.3px;
}

.mapPinLabel.hasEvent {
  color:white;
  border:1px solid rgba(255,77,109,0.4);
}

.mapEventDot {
  position:absolute;
  top:-6px; right:-6px;
  width:12px; height:12px;
  border-radius:50%;
  background:#ff4d6d;
  border:2px solid #16213e;
  animation:mapDotPulse 1.5s infinite;
}

/* LOCATION OPTION BUTTON */
.mapOptBtn {
  width:100%; height:72px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  background:rgba(0,0,0,0.6);
  cursor:pointer; overflow:hidden;
  position:relative;
  display:flex; align-items:center;
  backdrop-filter:blur(6px);
  transition:transform 0.15s;
}

.mapOptBtn:active { transform:scale(0.98); }

.mapOptBtn.hasEvent {
  border-color:rgba(255,77,109,0.4);
  background:rgba(255,77,109,0.08);
}

.mapOptBtnBg {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-size:cover;
  background-position:center;
  opacity:0.35;
}

.mapOptBtnOverlay {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.2) 100%
  );
}

.mapOptBtnContent {
  position:relative; z-index:2;
  padding:0 16px;
  display:flex; align-items:center;
  gap:12px; width:100%;
  box-sizing:border-box;
}

.mapOptBtnName {
  color:white; font-size:15px;
  font-weight:700; flex:1;
  text-align:left;
}

/* EVENT BUTTON */
.mapEvtBtn {
  width:auto;
  padding:11px 30px;
  border:none;
  border-radius:24px;
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  color:white;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:block;
  text-align:center;
  box-shadow:0 3px 14px rgba(255,77,109,0.45);
  transition:transform 0.12s;
  margin:0 auto;
  -webkit-tap-highlight-color:transparent;
}

/* ══════════════════════════════════════════════════════
   PC / DESKTOP EXTERNAL OVERLAY — bottom dialogue bar
   ──────────────────────────────────────────────────────
   js/device-overlay.js puts .pc-overlay-below on <body> when
   there's a mouse+hover device. Every narration/dialogue overlay
   in the game shares the same shape (an outer div + an inline
   text bubble inside it, plus a "tap to continue" hint) — this
   turns the outer div into a full-width, semi-transparent-black
   visual-novel-style dialogue bar fixed to the bottom of the
   viewport (overlapping the bottom of the phone slightly, same
   as classic VN text boxes), and strips the inner bubble's own
   background/border so it just sits as centered text inside
   that bar. Only geometry/background is touched here — display
   is left alone so the existing JS show/hide toggling (none/
   block) keeps working exactly as before. Nothing here applies
   unless .pc-overlay-below is set, so mobile/touch play is
   100% unaffected.
════════════════════════════════════════════════════════ */
body.pc-overlay-below .phoneFrame {
  /* NOTE: must use margin, not transform — a transform here would make
     .phoneFrame a containing block for its fixed-position descendants
     (the dialogue bar below), trapping it inside the phone's width
     instead of spanning the full viewport. */
  margin-bottom:80px;
}

/* Each dialogue overlay above lives inside its own screen container
   (#introScreen, #dayEventScreen, #memoryViewer, #callApp, #visitScene,
   #timberDateScene, #ofVisitScene), and every one of those containers
   sets its own explicit z-index (values ranging from 10 to 999999) —
   which establishes a CSS stacking context. That caps the dialogue bar's
   effective stacking position at its container's z-index NO MATTER HOW
   HIGH the dialogue bar's own z-index is set, since child stacking is
   scoped within the nearest z-index-establishing ancestor. All of those
   container z-indexes are far below #phoneNavBar's 9999999, which is
   why the phone's nav bar was rendering on top of the dialogue text on
   PC.

   Fix: lower #phoneNavBar itself instead of raising the 7 containers.
   Raising the containers was tried first and reverted — #introScreen in
   particular is display:flex (visible) from page load and normally sits
   harmlessly BEHIND the age gate / language gate purely because of its
   low z-index; boosting it made it flash on top of both as a black
   screen before the player ever reaches the intro. Lowering the single,
   well-contained #phoneNavBar element below the smallest container
   z-index (10, #memoryViewer) achieves the same "dialogue always wins"
   result without disturbing any container's relationship to anything
   else, and also lets #pcOverlayPortrait (10000000, unchanged) go back
   to correctly rendering above the dialogue bar as before. PC-mode only. */
body.pc-overlay-below #phoneNavBar {
  z-index:5 !important;
}

body.pc-overlay-below #introText,
body.pc-overlay-below #dayEventText,
body.pc-overlay-below #memoryViewText,
body.pc-overlay-below #callNarrText,
body.pc-overlay-below #vsNarrText,
body.pc-overlay-below #timberDateNarr,
body.pc-overlay-below #ofVisitNarr {
  position:fixed !important;
  top:auto !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  transform:none !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:56px 48px 46px !important;
  min-height:220px !important;
  background:
    linear-gradient(to top, rgba(8,4,14,0.62) 0%, rgba(14,6,22,0.55) 55%, rgba(20,8,30,0.18) 100%) !important;
  border-top:1px solid rgba(255,77,109,0.35) !important;
  box-shadow:
    0 0 24px rgba(255,77,109,0.12),
    0 -14px 40px rgba(0,0,0,0.3) !important;
  backdrop-filter:blur(3px) !important;
  text-align:center !important;
  z-index:99999 !important;
}

/* thin glowing accent line along the very top edge of the bar */
body.pc-overlay-below #introText::before,
body.pc-overlay-below #dayEventText::before,
body.pc-overlay-below #memoryViewText::before,
body.pc-overlay-below #callNarrText::before,
body.pc-overlay-below #vsNarrText::before,
body.pc-overlay-below #timberDateNarr::before,
body.pc-overlay-below #ofVisitNarr::before {
  content:"" !important;
  position:absolute !important;
  top:0 !important; left:50% !important;
  transform:translate(-50%, -100%) !important;
  width:min(220px, 40%) !important;
  height:3px !important;
  background:linear-gradient(90deg, transparent, #ff4d6d, transparent) !important;
  border-radius:2px !important;
}

/* Inner text bubbles: strip their own bubble styling — the bar
   above already provides the background — and let them read as
   a centered, comfortably-measured line of text inside it. */
body.pc-overlay-below #introTextInner,
body.pc-overlay-below #dayEventTextInner,
body.pc-overlay-below #memoryViewTextInner,
body.pc-overlay-below #callNarrInner,
body.pc-overlay-below #vsNarrInner,
body.pc-overlay-below #timberDateNarrInner,
body.pc-overlay-below #ofVisitNarrInner {
  display:block !important;
  max-width:min(900px, 90%) !important;
  width:100% !important;
  margin:0 auto !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  padding:0 !important;
  box-sizing:border-box !important;
  font-size:16px !important;
  letter-spacing:0.2px !important;
  line-height:1.8 !important;
  text-shadow:0 2px 10px rgba(0,0,0,0.9) !important;
}

body.pc-overlay-below #introTapHint,
body.pc-overlay-below #dayEventTapHint,
body.pc-overlay-below #memoryViewHint,
body.pc-overlay-below #callTapHint,
body.pc-overlay-below #vsTapHint,
body.pc-overlay-below #timberDateTapHint,
body.pc-overlay-below #ofVisitTapHint {
  position:fixed !important;
  bottom:16px !important;
  top:auto !important;
  left:auto !important;
  right:30px !important;
  transform:none !important;
  color:rgba(255,255,255,0.5) !important;
  letter-spacing:1.5px !important;
  z-index:100000 !important;
}

/* PC-ONLY dialogue speaker portrait — sits in the bottom dialogue bar's
   left side, in the empty space beside the phone rather than centered
   behind it (the phone occupies the middle of the screen, so centering
   this would just hide it behind/under the phone on most screens).
   js/pc-overlay-portrait.js toggles src/display; nothing here ever
   runs any story logic. Hidden by default and force-hidden outside
   .pc-overlay-below as a second safety net, so this can never appear
   on phone/touch or once a desktop window has been shrunk into the
   fullscreen phone simulation. */
#pcOverlayPortrait {
  display:none;
  position:fixed;
  bottom:0;
  left:40px;
  max-height:88vh;
  max-width:min(400px, 32vw);
  object-fit:contain;
  object-position:bottom;
  pointer-events:none;
  z-index:10000000;
  filter:
    drop-shadow(0 0 20px rgba(255,77,109,0.5))
    drop-shadow(0 0 46px rgba(255,77,109,0.28))
    drop-shadow(0 14px 26px rgba(0,0,0,0.6));
}

body:not(.pc-overlay-below) #pcOverlayPortrait {
  display:none !important;
}

.mapEvtBtn:active { transform:scale(0.94); }

#languageCardGrid::-webkit-scrollbar { display:none; }